<template>
    <div class="main-menu">
        <div class="logo" :class="{ 'centered-logo': isFold }">
            <img src="@/assets/img/logo.svg" width="30" height="45">
            <h2 class="title" v-show="!isFold">来风的管理系统</h2>
        </div>
        <div class="menu">
            <el-menu :collapse="isFold" text-color="#b7bdc3" active-text-color="#fff" background-color="#001529">
                <template v-for="item in userMenus" :key="item.id">
                    <el-sub-menu :index='item.id.toString()'>
                        <template #title>
                            <el-icon>
                                <component :is="item.icon.split('-icon-')[1]"></component>
                            </el-icon>
                            <span>{{ item.name }}</span>
                        </template>

                        <template v-for="subitem in item.children" :key="subitem.id">
                            <el-menu-item :index="subitem.id.toString()" @click="handleItemClick(subitem)">
                                <template #title>
                                    <el-icon>
                                        <component :is="subitem.icon.split('-icon-')[1]"></component>
                                    </el-icon>
                                    {{ subitem.name }}
                                </template>
                            </el-menu-item>
                        </template>
                    </el-sub-menu>
                </template>
            </el-menu>

        </div>

    </div>
</template>

<script setup lang="ts">
import userLoginStore from '@/store/login/login'
import type { Key } from '@element-plus/icons-vue';
import { it } from 'element-plus/es/locales.mjs';
import { useRoute, useRouter } from 'vue-router';
defineProps({
    isFold: {
        type: Boolean,
        default: false
    }
})
//  获取动态的菜单
const userLogin = userLoginStore()
const userMenus = userLogin.userMenus

const router = useRouter()
function handleItemClick(item: any) {
    const url = item.url
    if (url) {
        router.push(url)
    }
}
</script>

<style lang="less" scoped>
.main-menu {
    height: 100%;
    background-color: black;

}

.centered-logo {
    justify-content: center;
    /* 当 isFold 为 true 时，水平居中 */
    padding-left: 0;
    /* 去掉左侧的间距 */
}

.logo {
    color: ghostwhite;
    display: flex;
}

.title {
    margin: 6px;
}

.el-menu {
    border-right: none;
    user-select: none;
}

.el-sub-menu {
    .el-menu-item {
        // padding-left: 50px !important;
        background-color: #0c2135;
    }

    .el-menu-item:hover {
        color: #fff;
    }

    .el-menu-item.is-active {
        background-color: #0a60bd;
    }
}
</style>